<script setup>
import {} from "vue";
import { formatCount } from "@/utils/format";

const props = defineProps({
  list: {
    type: Array,
  },
});

const openMusicLsit = (id) => {
  uni.navigateTo({
    url: `/pages/musicList/musicList?id=${id}`,
  });
};
</script>

<template>
  <view class="home-music-list">
    <template>
      <view
        class="music-list"
        v-for="item in props.list"
        :key="item.id"
        @tap="openMusicLsit(item.id)"
      >
        <image :src="item.picUrl" mode="aspectFit" class="music-list-img" />
        <view class="playcount">
          <i class="iconfont icon-bofang"></i>
          <text>
            {{ formatCount(item.playCount) }}
          </text>
        </view>
        <view class="music-list-name ellipsis2">
          {{ item.name }}
        </view>
      </view>
    </template>
    <template v-if="!props.list.length">
      <view class="music-list" v-for="(item, index) in 6" :key="index">
        <view class="music-list-img skeleton-color"></view>
        <view class="music-list-name skeleton-color"></view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.home-music-list {
  padding: 0 30rpx;
  font-size: 30rpx;
  display: flex;
  .music-list {
    margin-right: 30rpx;
    position: relative;
    height: 320rpx;
    width: 240rpx;
    .music-list-img {
      height: 240rpx;
      width: 240rpx;
      border-radius: 20rpx;
    }
    .playcount {
      position: absolute;
      top: 10rpx;
      right: 16rpx;
      font-size: 22rpx;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      text-shadow: 0 0 6rpx rgb(86, 86, 86);
      .icon-bofang {
        font-size: 16rpx;
        margin-right: 4rpx;
      }
    }
    .music-list-name {
      margin-top: 6rpx;
      height: 34rpx;
      line-height: 34rpx;
      font-size: 26rpx;
    }
  }
  .skeleton-color {
    background-color: rgb(237, 237, 237);
    border-radius: 6rpx;
  }
}
</style>
